<template>
	<view>
		<u-modal v-model="modalShow" show-cancel-button async-close ref="uModal"	 cancel-color="#2979ff" :confirm-color="confirmColor" @confirm="handleConfirm"
			@cancel="handleCancel" :confirm-text="confirmText" cancel-text="查看详情" :show-title="false">
			<view class="slot-content">
				<u-image width="100%" height="200px" mode="aspectFit" :src="info.pic"></u-image>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "custom-modal",
		props: {
			value: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			modalShow: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		data() {
			return {
				title: '倒计时10',
				confirmColor: '#606266',
				cancelText: '',
				timer: null,
				time: 0,
				confirmText: ''
			};
		},
		watch: {
			value(val) {
				if (val) {
					this.time = 0;
					clearInterval(this.timer);
					this.timer  = null
					
					this.start()
				}
			}
		},
		methods: {
			handleConfirm() {
				this.$refs.uModal.clearLoading()
				if (this.time !== 0) {
					return
				}
				this.$emit('onCancel')
				this.end()
			},
			handleCancel() {
				this.$emit('onConfirm',this.info)
			},
			start() {
				this.time = this.info.time
				this.confirmText = `倒计时(${this.time})`
				this.timer = setInterval(() => {
					this.time -= 1;
					this.confirmText = `倒计时(${this.time})`
					if (this.time === 0) {
						this.end()
						return
					}
				}, 1000)
			},
			end() {
				clearInterval(this.timer);
				this.timer = null;
				this.confirmColor = '#2979ff';
				this.confirmText = '确认'
			},
		}


	}
</script>

<style>
.slot-content{
	padding-top: 10px;
}
</style>